<template>
  <view>
    <search-input class="search-view"></search-input>
    <view class="container">
      <scroll-view class="menu-container" scroll-y="true">
        <text
          :class="[
            'menu-item',
            { 'meun-active': index == menuIndex },
          ]"
          @click="selectAction(index)"
          v-for="(item, index) in dataList"
          :key="item.cat_id"
          >{{ item.cat_name }}
        </text>
      </scroll-view>
      <scroll-view class="product-container" scroll-y="true">
        <view
          class="product-child"
          v-for="item1 in childList"
          :key="item1.cat_id"
        >
          <text class="section-view">/{{ item1.cat_name }}/</text>
          <view class="product-view">
            <view
              @click="productAction(item2)"
              class="product-item"
              v-for="item2 in item1.children"
              :key="item2.cat_id"
            >
              <view>
                <image :src="item2.cat_icon" mode="widthFix"> </image>
              </view>
              <text>{{ item2.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      childList: [],
      menuIndex: 0,
    }
  },
  onLoad() {
    this.getListData()
  },
  methods: {
    async getListData() {
      const value = await this.$http.categoriesData()
      this.dataList = value
      this.childList = value[0].children
    },

    selectAction(index) {
      this.menuIndex = index
      this.childList = this.dataList[index].children
    },

    productAction(item) {
      this.$mrouter.push("/pages/goods/index", { cid: item.cat_id })
    },
  },
}
</script>

<style lang="scss" scoped>
.search-view {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--window-top);
}

.container {
  display: flex;
  position: fixed;
  top: calc(var(--window-top) + 88rpx);
  left: 0;
  right: 0;
  bottom: var(--window-bottom);

  .menu-container {
    flex: 2;
    height: 100%;

    .menu-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      font-size: 26rpx;
      background-color: rgb(242, 237, 237);
    }
  }
  .product-container {
    flex: 5;
    height: 100%;

    .product-child {
      .section-view {
        display: block;
        position: sticky;
        top: 0;
        z-index: 1;
        line-height: 80rpx;
        text-align: center;
        font-size: 26rpx;
        color: skyblue;
        background-color: white;
      }
      .product-view {
        padding: 0 20rpx 20rpx 20rpx;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20rpx;
      }
      .product-item {
        view {
          padding: 0 20rpx;

          image {
            width: 100%;
            height: auto;
          }
        }
        text {
          display: block;
          color: #333;
          font-size: 25rpx;
          text-align: center;
        }
      }
    }
  }
}

.meun-active {
  color: #c00000;
  border-left: 5rpx solid #c00000;
  background-color: white !important;
}
</style>
